<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="./node_modules/assets/css/bootstrap.reset.css" />
  <link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
  <title>Document</title>

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- 小屏幕导航按钮和logo -->
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">几瓶？</a>
      </div>
      <!-- 小屏幕按钮和logo -->
      <!-- 导航 -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">首页</a></li>
          <li><a href="#bbs">论坛</a></li>
          <li><a href="#html5">前端开发</a></li>
          <li><a href="#course">最新课程</a></li>
          <li><a href="#app">移动app</a></li>
          <li><a href="#contact">联系我们</a></li>
        </ul>
      </div>
      <!-- 导航 -->
    </div>
  </nav>
  <!-- home -->
  <section id="home">
    <div class="lvjing">
      <div class="container">
        <div class="row wow bounce" data-wow-duration="1.2s" data-wow-delay="1s">
          <div class="col-md-1"></div>
          <div class="col-md-10">
            <h1>bootstrap学习，studyING</h1>
            <p>这只是一段测试文字这只是一段测试文字这只是一段测试文字</p>
            <img src="http://img3.imgtn.bdimg.com/it/u=3942419516,650822309&fm=26&gp=0.jpg" alt=""
              class="img-responsive" />
          </div>
          <div class="col-md-1"></div>
        </div>
      </div>
    </div>
  </section>
  <!-- home -->
  <!-- bbs -->
  <section id="bbs">
    <div class="container wow bounce" data-wow-offset="30">
      <div class="row">
        <div class="col-md-4">
          <a href="http://www.maiziedu.com" target="_blank">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <h3>android开发</h3>
            <p>android开发技术交流,问题求助,实战案例分享</p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="http://www.maiziedu.com" target="_blank">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <h3>android开发</h3>
            <p>android开发技术交流,问题求助,实战案例分享</p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="http://www.maiziedu.com" target="_blank">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <h3>android开发</h3>
            <p>android开发技术交流,问题求助,实战案例分享</p>
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- bbs -->
  <!-- html5 -->
  <section id="html5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h2>HTML5前端开发</h2>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发
          </p>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发
          </p>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发
          </p>
        </div>
        <div class="col-md-6">
          <img src="./node_modules/assets/1.jpg" class="img-responsive" />
        </div>
      </div>
    </div>
  </section>
  <!-- html5 -->

  <!-- bootstrap -->
  <section id="bootstrap">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <img src="./node_modules/assets/1.jpg" class="img-responsive" />
        </div>
        <div class="col-md-6">
          <h2>HTML5前端开发</h2>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发
          </p>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发
          </p>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            HTML5前端开发HTML5前端开发HTML5前端开发HTML5前端开发
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- bootstrap -->

  <!-- course -->
  <section id="course">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>最新课程</h2>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img class="img-responsive" src="./node_modules/assets/1.jpg" alt="" />
            <a href="#" class="btn btn-sm btn-primary">加入学习</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- course -->

  <!-- app -->
  <section id="app">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h2>app前端开发</h2>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            app前端开发app前端开发app前端开发app前端开发app前端开发app前端开发app前端开发
          </p>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            app前端开发app前端开发app前端开发app前端开发app前端开发
          </p>
          <p>
            <span class="glyphicon glyphicon-cloud"></span>
            app前端开发app前端开发app前端开发app前端开发
          </p>
          <button class="btn btn-info btn-sm">按钮一</button>
          <button class="btn btn-info btn-sm">按钮二</button>
        </div>
        <div class="col-md-6">
          <img src="./node_modules/assets/1.jpg" class="img-responsive" />
        </div>
      </div>
    </div>
  </section>

  <!-- app -->

  <!-- contact -->
  <div id="contact">
    <div class="lvjing">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h2>
              <span class="glyphicon glyphicon-plane"></span>
              标题文字
            </h2>
            <p>
              段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字
            </p>
          </div>
          <div class="col-md-6">
            <form action="#">
              <div class="col-md-6">
                <input type="text" class="form-control" placeholder="姓名">
              </div>
              <div class="col-md-6">
                <input type="email" class="form-control" placeholder="邮箱">
              </div>
              <div class="col-md-12">
                <input type="text" placeholder="标题" class="form-control">
              </div>
              <div class="col-md-12">
                <textarea placeholder="留言" class="form-control" cols="30" rows="4"></textarea>
              </div>
              <div class="col-md-8">
                <input type="submit" value="提交" class="btn btn-md btn-primary">
              </div>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- contact -->
  <!-- footer -->
  <div id="footer">
    <div class="row">
      <div class="col-md-12">
        <h4>这是底部内容</h4>
      </div>
    </div>
  </div>
  <!-- footer -->

  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="./single-page-nav/singlepagenav.jquery.js"></script>
  <script src="./node_modules/wow.js/dist/wow.min.js"></script>
  <script>
    $(function () {
      $('.nav').singlePageNav({
        offset: 70
      })
      // 小屏幕导航点击关闭导航菜单
      $('.navbar-collapse a').click(function () {
        $('.navbar-collapse').collapse('hide')
      })
      // 初始化
      new WOW().init()
    })


  </script>
</body>

</html>